<template>
  <el-button class="closeAllTabs" type="primary" plain @click="closeAllPages" size="small" v-if="pageIds.length>1">关闭所有标签页</el-button>
  <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" @tab-remove="removeTab" @click="pushUrl($event)">
    <el-tab-pane v-for="item in editableTabs" :key="item.id" :label="item.title" :name="item.name" :closable="item.closable">
      <template #label v-if="item.icon">
        <span>
          <el-icon size="26"><HomeFilled /></el-icon>
        </span>
      </template>
      <component :is="item.content" v-if="item.icon" />
      <router-view :id="item.id" v-else></router-view>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { HomeFilled } from '@element-plus/icons-vue'
import MainPage from '@/views/tabPages/MainPage.vue'
import StaticPage from '@/views/tabPages/StaticPage.vue'
import SetUserPage from '@/views/tabPages/SetUser.vue'
import eventBus from '@/libs/eventBus'
import { Delete } from '@element-plus/icons-vue'
import router from '@/router'


let mainId = shallowRef(MainPage)
let staticPId = shallowRef(StaticPage)
let userPId = shallowRef(SetUserPage)
let tabIndex = 2;
const idMain = "page000000000000";
const editableTabsValue = ref("main");
const editableTabs = ref<any>([
  {
    title: "",
    name: "main",
    id: idMain,
    content: mainId,
    icon: "icon-shequ-on",
    closable: false,
  },
]);
const pageIds = ref([idMain]);
let pushIndex = ref<number>(0)
let pushItem = ref<any>({})
const pushUrl:any = ($event:any) =>{
  pushItem = editableTabs.value.filter((item:any):any=>{
    return $event.originalTarget.id == "tab-"+item.name
  })
  
  router.push('/'+pushItem[0].content)
}
const closeAllPages:any = () => {
  ElMessageBox.confirm(
    '是否关闭所有标签页？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>{
    editableTabsValue.value = "main";
    pageIds.value = [idMain]
    editableTabs.value = [
      {
        title: "",
        name: "main",
        id: idMain,
        content: mainId.value,
        icon: "icon-shequ-on",
        closable: false,
      },
    ]
  })
  
}

const addTab:any = (targetName: string[]) => {
  if (pageIds.value.indexOf(targetName[1])==-1) {
    const newTabName = `${++tabIndex}`;
    pageIds.value.push(targetName[1])
    editableTabs.value.push({
      title: targetName[0],
      name: newTabName,
      id: targetName[1],
      content: targetName[2],
      icon: "",
      closable: true,
    });
    editableTabsValue.value = newTabName;
    // console.log('editableTabs add',editableTabs);
    router.push(targetName[2])
  };
};
const userTab:any = (targetName: string[]) => {
  if (pageIds.value.indexOf(targetName[1])==-1) {
    const newTabName = `${++tabIndex}`;
    pageIds.value.push(targetName[1])
    editableTabs.value.push({
      title: targetName[0],
      name: newTabName,
      id: targetName[1],
      content: targetName[2],
      icon: "",
      closable: true,
    });
    editableTabsValue.value = newTabName;
    router.push(targetName[2])
  };
};
const removeTab:any = (targetName: string) => {
  const tabs = editableTabs.value;
  let deleteId = ref<string>('')
  //设置选中的标签
  let activeName = editableTabsValue.value;
  //删除标签页后设置选中的标签
  
  activeName = targetName
  tabs.forEach((tab:any, index:any) => {
    if (tab.name === targetName) {
      const nextTab = tabs[index + 1] || tabs[index - 1];
      if (nextTab) {
        activeName = nextTab.name;
        deleteId.value = tab.id;
        console.log(nextTab);
        if (activeName!="main") {
          router.push("/"+nextTab.content)
        }
      }
    }
  });
  editableTabsValue.value = activeName;
  --tabIndex;
  //删除标签页
  editableTabs.value = tabs.filter((tab:any) => tab.name !== targetName);
  pageIds.value = pageIds.value.filter((item) => {
    return item != deleteId.value
  });
};

eventBus.on("addPage",addTab)
eventBus.on("setPage",userTab)
</script>

<style lang="scss" scoped>
.closeAllTabs{
  position: fixed;
  right: 0;
  transform: translate(-20%,-90%);
}
.demo-tabs{
  width: 100%;
}
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
